<template>
  <div class="inject-grandchild">
    <h6 class="text-sm font-semibold text-gray-800 mb-3">深层子组件 (使用 inject)</h6>

    <div class="space-y-3">
      <!-- 显示注入的主题 -->
      <div class="inject-item" :class="themeClasses">
        <span class="inject-label">当前主题:</span>
        <span class="inject-value">{{ currentTheme }}</span>
        <div class="theme-indicator" :class="themeClasses"></div>
      </div>

      <!-- 主题切换按钮 -->
      <div class="inject-item">
        <span class="inject-label">主题控制:</span>
        <div class="flex space-x-2">
          <button
            @click="changeTheme('light')"
            :class="currentTheme === 'light' ? 'bg-gray-800 text-white' : 'bg-gray-200'"
            class="px-2 py-1 rounded text-xs"
          >
            浅色
          </button>
          <button
            @click="changeTheme('dark')"
            :class="currentTheme === 'dark' ? 'bg-gray-800 text-white' : 'bg-gray-200'"
            class="px-2 py-1 rounded text-xs"
          >
            深色
          </button>
          <button
            @click="changeTheme('blue')"
            :class="currentTheme === 'blue' ? 'bg-blue-600 text-white' : 'bg-blue-200'"
            class="px-2 py-1 rounded text-xs"
          >
            蓝色
          </button>
        </div>
      </div>

      <!-- 显示注入状态 -->
      <div class="inject-item">
        <span class="inject-label">注入状态:</span>
        <div class="text-xs space-y-1">
          <p :class="currentTheme ? 'text-green-600' : 'text-red-600'">
            {{ currentTheme ? '✅ 主题数据注入成功' : '❌ 主题数据注入失败' }}
          </p>
          <p :class="updateTheme ? 'text-green-600' : 'text-red-600'">
            {{ updateTheme ? '✅ 主题更新函数注入成功' : '❌ 主题更新函数注入失败' }}
          </p>
        </div>
      </div>

      <!-- 嵌套层级展示 -->
      <div class="inject-item">
        <span class="inject-label">组件层级:</span>
        <div class="text-xs text-gray-600">
          <div class="flex items-center space-x-1">
            <span class="component-level">祖先组件 (provide)</span>
            <span>→</span>
            <span class="component-level">中间组件 (透传)</span>
            <span>→</span>
            <span class="component-level bg-blue-100 text-blue-800">当前组件 (inject)</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 动态样式演示 -->
    <div class="mt-4 p-3 rounded theme-demo" :class="themeClasses">
      <h6 class="text-sm font-medium mb-2">主题效果演示</h6>
      <p class="text-xs">这个区域会根据注入的主题动态改变样式</p>
      <div class="mt-2 flex space-x-2">
        <div class="w-4 h-4 rounded theme-color-1"></div>
        <div class="w-4 h-4 rounded theme-color-2"></div>
        <div class="w-4 h-4 rounded theme-color-3"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, computed, type Ref } from 'vue'

// 注入祖先组件提供的数据和方法
const currentTheme = inject<Ref<string>>('theme')
const updateTheme = inject<(theme: string) => void>('updateTheme')

// 计算主题样式类
const themeClasses = computed(() => {
  if (!currentTheme?.value) return {}

  const themes = {
    light: {
      'bg-white': true,
      'text-gray-800': true,
      'border-gray-300': true,
    },
    dark: {
      'bg-gray-800': true,
      'text-white': true,
      'border-gray-600': true,
    },
    blue: {
      'bg-blue-100': true,
      'text-blue-900': true,
      'border-blue-300': true,
    },
  }

  return themes[currentTheme.value as keyof typeof themes] || themes.light
})

// 切换主题
const changeTheme = (theme: string) => {
  if (updateTheme) {
    updateTheme(theme)
  }
}
</script>

<style scoped lang="scss">
.inject-grandchild {
  @apply border border-gray-300 rounded-lg p-4 bg-white;
}

.inject-item {
  @apply flex flex-col space-y-1 p-2 bg-gray-50 rounded;
}

.inject-label {
  @apply text-xs font-medium text-gray-600;
}

.inject-value {
  @apply text-sm font-semibold;
}

.theme-indicator {
  @apply w-full h-2 rounded mt-1;
}

.component-level {
  @apply px-2 py-1 bg-gray-100 rounded text-xs;
}

.theme-demo {
  @apply border-2 transition-all duration-300;

  .theme-color-1 {
    background: currentColor;
    opacity: 0.3;
  }

  .theme-color-2 {
    background: currentColor;
    opacity: 0.6;
  }

  .theme-color-3 {
    background: currentColor;
    opacity: 0.9;
  }
}

// 主题特定样式
.bg-white {
  .theme-indicator {
    @apply bg-gray-200;
  }
}

.bg-gray-800 {
  .theme-indicator {
    @apply bg-gray-400;
  }
}

.bg-blue-100 {
  .theme-indicator {
    @apply bg-blue-300;
  }
}
</style>
